<template>
  <item-panel class="flow-panel-item">
    <item
      class="panel-item"
      type="node"
      size="72*72"
      shape="flow-circle"
      :model="{
        color: '#FA8C16',
        label: 'Start'
      }"
      src=""
    />
    <item
      class="panel-item"
      type="node"
      size="80*48"
      shape="flow-rect"
      :model="{
        color: '#1890FF',
        label: 'Normal'
      }"
      src=""
    />
    <item
      class="panel-item"
      type="node"
      size="80*72"
      shape="flow-rhombus"
      :model="{
        color: '#13C2C2',
        label: 'Decision'
      }"
      src=""
    />
    <item
      class="panel-item"
      type="node"
      size="80*48"
      shape="flow-capsule"
      :model="{
        color: '#B380EB',
        label: 'Model'
      }"
      src=""
    />
  </item-panel>
</template>

<script>
import { ItemPanel, Item } from 'vg-editor'

export default {
  name: 'FlowPanelItem',
  components: { ItemPanel, Item }
}
</script>

<style lang="less">
.flow-panel-item {
  margin-top: 35px;
  .panel-item {
    margin-bottom: 15px;
  }
}
</style>
